<template>
  <div class="pie-container" ref="cities"></div>
</template>
<script>
import { EleResize } from "@/utils/resize/index.js";
let mileageEcharts = null;
let flag = false;
export default {
  props: {
    pieData: {
      type: Array,
      required: true,
    },
    unit: {
      type: String,
    },
  },
  data() {
    return {
      mileageEcharts: "", //行驶里程分布echarts
      newPieData: [],
      option: "",
      startCharts: null,
    };
  },
  watch: {
    pieData: {
      handler(newData, oldData) {
        this.newPieData = newData;
        if (this.newPieData && this.newPieData.length > 0) {
          this.$nextTick(() => {
            this.pie();
          });
        }
      },
      immediate: true,
      deep: true, // 如果是对象要深度监听
    },
  },
  methods: {
    // 城市排名图表
    pie() {
      this.$nextTick(() => {
      let cityEcharts = this.$echarts.init(this.$refs.cities);
        cityEcharts.resize();
        let obj = [];
        let datalength = [];
        let y1 = [];
        for (let i = 0; i < this.newPieData.length; i++) {
          datalength.push(0);
          let pl = {};
          y1.push(this.newPieData[i].vehiclePlate);
          pl.name = this.newPieData[i].vehiclePlate;
          pl.value = this.newPieData[i].allMileage;
          obj.push(pl);
        }
        obj.reverse();
        let option = {
          animation: true,
          backgroundColor: "rgba(255, 255, 255, 0)",
          grid: {
            left: "15%",
            top: "5%",
            right: "15%",
            bottom: "2%",
            containLabel: true,
            width: "auto",
            height: "auto",
          },
          xAxis: [
            {
              show: false,
            },
          ],
          yAxis: [
            {
              axisTick: "none",
              axisLine: "none",
              offset: "10",
              axisLabel: {
                textStyle: {
                  color: "#fff",
                  fontSize: "12%",
                },
              },
              data: y1,
            },
            {
              axisLine: {
                lineStyle: {
                  color: "rgba(0,0,0,0)",
                },
              },
              data: [],
            },
          ],
          series: [
            {
              name: "条",
              type: "bar",
              stack: "圆",
              yAxisIndex: 0,
              data: obj,
              barWidth: 8,
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#47A785", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#65E3AC", // 100% 处的颜色
                      },
                    ],
                  },
                  barBorderRadius: 5,
                },
              },
              label: {
                show: true,
                position: "right",
                data: obj,
                offset: [10, 0],
                textStyle: {
                  color: "#fff",
                  fontSize: "16%",
                  fontStyle: "bold",
                },
                formatter: "{c}km",
              },
              z: 2,
            },
            {
              name: "内圆",
              type: "scatter",
              stack: "圆",
              yAxisIndex: 0,
              data: datalength,
              label: false,
              symbolSize: 12,
              itemStyle: {
                normal: {
                  borderColor: "#90FDD3",
                  borderWidth: 2,
                  color: "#90FDD3",
                  opacity: 1,
                  shadowColor: "#90FDD3",
                  shadowBlur: 10,
                },
              },
              z: 2,
            },
            {
              name: "内圆框",
              type: "scatter",
              stack: "圆",
              yAxisIndex: 0,
              data: datalength,
              label: false,
              symbolSize: 10,
              itemStyle: {
                normal: {
                  // borderWidth: 2,
                  color: "#90FDD3",
                  opacity: 1,
                },
              },
              z: 1,
            },
          ],
        };
        // 改变屏幕大小图表重新加载
        let resizeDiv = this.$refs.cities; // 这个是渲染echarts的div
        let listener = () => {
          cityEcharts.resize();
        };
        EleResize.on(resizeDiv, listener);
        cityEcharts.clear();
        option && cityEcharts.setOption(option, true);
      });
    },
  },
  beforeDestroy() {
    if (mileageEcharts) {
      mileageEcharts.dispose();
      mileageEcharts = null;
    }
  },
};
</script>
<style lang="scss" scoped>
.pie-container {
  width: 100%;
  height: 100%;
}
</style>
